<template>
      <div class="marquee">
        <div class="marquee_box">
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li
              v-for="(item, index) in marqueeList"
              :key="index"
              :style="{background: item.background, display: 'flex', 'justify-content': 'space-between',  'align-items': 'center'}"
            >
              <span>
                <i :class="item.icon" v-if="item.icon"></i>
                <span v-else>{{item.ranking}}</span>
              </span>
              <span class="title">{{item.title}}</span>
              <span class="red"> {{item.essayTypeName}}</span>
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
export default {
  name: "RankingList",
  components: {},
  props: {
    marqueeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      animate: false,
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
     setInterval(this.showMarquee, 2000);
  },
  methods: {
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        if (this.marqueeList.length % 2 != 0) {
          this.marqueeList[0]["background"] =
            this.marqueeList[0]["background"] === "rgba(0,0,0,.4)"
              ? "rgba(0,0,0,.6)"
              : "rgba(0,0,0,.4)";
        }
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift();
        this.animate = false;
      }, 500);
    }
  }
}
</script>

<style scoped lang="scss">
div,
      ul,
      li,
      span,
      img {
        margin: 0;
        padding: 0;
        display: flex;
        box-sizing: border-box;
      }

      .marquee {
        width: 100%;
        color: #fff;
        box-sizing: border-box;
      }

      .marquee_box {
        display: block;
        position: relative;
        width: 100%;
        /* 占四分之三的高度  */
        height:92%;
        margin-top: 5%;
        overflow: hidden;
      }

      .marquee_list {
        display: block;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      .marquee_top {
        transition: all 0.5s ease-out;
        margin-top: -44px;
      }

      .marquee_list li {
        height: 2.5rem;
        font-size: 14px;
        padding:0 20px;
      }

      .marquee_list li span {

        padding: 0 2px;
      }
      .marquee_list li .title{
        padding: 0 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex:1;
        width: 100%;
      }

      .red {
        color: #ff0101;
      }
</style>
